<template>
  <el-select
    v-model="modelValue"
    class="select"
    :filterable="true"
    placeholder="--请选择--"
    @change="handleChange"
    clearable
  >
    <el-option v-for="item in options"
      :key="item.key"
      :value="item.key"
      :label="item.value"
      :disabled="item.disabled === true"
    />
  </el-select>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoleStore } from "@/pinia/modules/role";

const modelValue = defineModel();
const emit = defineEmits(['change']);
const props = defineProps({
  options: [Array, String],
  showAll: {
    type: Boolean,
    default: false
  },
});

const options = ref([]);
const roleStore = useRoleStore();

const handleChange = () => {
  emit('change');
};

onMounted(() => {
  const optionList = [];
  if (props.showAll) {
    optionList.push({key: 'all', value: '所有角色'});
  }
  roleStore.getRole().then(roles => {
    roles.forEach(role => {
      optionList.push({key: role.id, value: role.name});
    });
    options.value = optionList;
  });
});
</script>

<style scoped>
.select {
  width: 100%;
}
</style>